<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="box">
        <div class="left-box">
            <p class="left-box-boldtext">
                Discover, collect, and charity in extraordinary NFT marketplace
            </p>
            <p class="left-box-slimtext">
                In aenean posuere lorem risus nec. Tempor tincidunt aenean purus purus vestibulum nibh mi venenatis
            </p>
            <div class="left-box-btnwrapper">
                <button class="left-box-explorebtn selected">Explore</button>
                <button class="left-box-createbtn">Create</button>
            </div>
        </div>
        <div class="right-box">
            <img class="display-nft" src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80" alt="unsplash-OG44d93i-NJk" border="0">
            <div class="infowrapper">
                <div class="info">
                    <img class="info-img" src="https://images.unsplash.com/photo-1535207010348-71e47296838a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=385&q=80" alt="unsplash-OG44d93i-NJk" border="0">
                    <div>
                        <p>Laura</p>
                        <p>0.21 Weth</p>
                    </div>
                </div>
                <div class="info2">
                    <p>WE ARE HERE</p>
                    <div class="iconwrapper">
                        <svg width="22" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M5.7365 2C3.6575 2 1.5 3.8804 1.5 6.5135c0 3.1074 2.3236 5.9603 4.8612 8.1207 1.2458 1.0606 2.4954 1.9137 3.4352 2.5022.4692.2937.8593.5203 1.1305.6727L11 17.85l.0731-.0409a27.984 27.984 0 0 0 1.1304-.6727c.9399-.5885 2.1895-1.4416 3.4353-2.5022C18.1764 12.4738 20.5 9.6209 20.5 6.5135 20.5 3.8805 18.3425 2 16.2635 2c-2.1054 0-3.8008 1.389-4.552 3.6426a.75.75 0 0 1-1.423 0C9.5373 3.389 7.8418 2 5.7365 2ZM11 18.7027l.3426.6672a.7502.7502 0 0 1-.6852 0L11 18.7027ZM0 6.5135C0 3.052 2.829.5 5.7365.5 8.0298.5 9.8808 1.7262 11 3.6048 12.1192 1.7262 13.9702.5 16.2635.5 19.171.5 22 3.052 22 6.5135c0 3.8183-2.8014 7.06-5.3888 9.2628-1.3167 1.121-2.6296 2.0166-3.6116 2.6314-.4918.308-.9025.5467-1.1918.7092a19.142 19.142 0 0 1-.4301.2347l-.0248.013-.007.0036-.0021.0011c-.0003.0001-.0012.0006-.3438-.6666-.3426.6672-.3424.6673-.3426.6672l-.0033-.0017-.007-.0036-.0248-.013a19.142 19.142 0 0 1-.4301-.2347 29.324 29.324 0 0 1-1.1918-.7092c-.982-.6148-2.295-1.5104-3.6116-2.6314C2.8014 13.5735 0 10.3318 0 6.5135Z" fill="#E0E0E0"/>
                        </svg>
                        25
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #e1e7ef;
    }

    .container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: #1F1D2B;
        &::before {
            content: "";
            position: absolute;
            width: 123px;
            height: 123px;
            left: 60%;
            top: 138px;
            filter: blur(90px);
            background-color: #FB37FF;
        }
        &::after {
            content: "";
            position: absolute;
            width: 123px;
            height: 123px;
            left: 80%;
            top: 550px;
            background-color: #18B2DE;
            filter: blur(80px);
        }
        .box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 80px;
        }
    }

    .box {
        .left-box {
            animation-name: left-slide;
            animation-duration: 0.8s;
            max-height: 500px;
            max-width: 55%;
            overflow: hidden;
            &-boldtext {
                margin: 0;
                font-family: Poppins,sans-serif;
                color: #FFFFFF;
                font-size: 65px;
                font-weight: 600;
                line-height: 60px;
                letter-spacing: -2px;
                text-align: left;
            }
            &-slimtext {
                margin: 24px 0;
                font-family: Poppins,sans-serif;
                color: #FFFFFF;
                font-size: 16px;
                font-weight: 400;
                line-height: 18px;
                letter-spacing: 1px;
                text-align: left;
            }
            &-btnwrapper {
                display: flex;
            }
            &-explorebtn {
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #1F1D2B;
                padding: 8px 38px;
                border-radius: 16px;

                font-family: 'Poppins',sans-serif;
                font-style: normal;
                font-weight: 600;
                font-size: 13px;
                letter-spacing: -1px;
                color: #FFFFFF;
            }
            &-createbtn {
                cursor: pointer;
                margin-left: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: transparent;
                padding: 8px 38px;
                border: 1px solid #D7D7D7;
                border-radius: 16px;

                font-family: 'Poppins',sans-serif;
                font-style: normal;
                font-weight: 600;
                font-size: 13px;
                letter-spacing: -1px;
                color: #FFFFFF;
            }
            .selected {
                border: none;
                background: linear-gradient(103.91deg, #9B51E0 21.01%, rgba(48, 129, 237, 0.8) 100%);
            }
        }
        .right-box {
            animation-name: right-slide;
            animation-duration: 0.8s;
            padding: 14px;
            border: 1px solid;
            background: linear-gradient(169.44deg, rgba(58, 129, 191, 0.08) 1.85%, rgba(65, 48, 90, 0.08) 98.72%);
            border-radius: 35px;
            max-height: 450px;
            max-width: 50%;
            overflow: hidden;
            &-nft {
                object-fit: cover;
                flex-shrink: 0;
                width: 300px;
                height: 300px;
                border-radius: 20px;
            }

            .infowrapper {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 10px;
            }

            .info {
                display: flex;
                align-items: center;
                font-family: 'Poppins',sans-serif;
                font-style: normal;
                color: #FFFFFF;
                font-weight: 600;
                font-size: 12px;
                p {
                    margin: 0;
                }
                &-img {
                    object-fit: cover;
                    flex-shrink: 0;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    margin-right: 10px;
                }
            }
            .info2 {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                font-family: 'Poppins',sans-serif;
                color: #FFFFFF;
                font-style: normal;
                font-weight: 600;
                font-size: 12px;
                p {
                    margin: 0;
                }
                .iconwrapper {
                    display: flex;
                    align-items: center;
                    svg {
                        margin-right: 5px;
                    }
                }
            }
        }
    }

    @keyframes left-slide {
        from {
            transform: translateX(-700px);
        }
        to {
            transform: translateX(0px);
        }
    }

    @keyframes right-slide {
        from {
            transform: translateX(550px);
        }
        to {
            transform: translateX(0px);
        }
    }
</style>
</html>